<template>
  <van-tabbar v-model="active" active-color="#000">
    <van-tabbar-item
      v-for="(tab, index) in tabList"
      :key="index"
      :badge="tab.badge"
      :to="tab.path"
    >
      <span>{{ tab.title }}</span>
      <template #icon="props">
        <img :src="props.active ? tab.iconActive : tab.iconDefault" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts">
import tab1_1 from "@/assets/tab/tab1_1.png";
import tab1_0 from "@/assets/tab/tab1_1.png";
import tab4_1 from "@/assets/tab/tab4_1.png";
import tab4_0 from "@/assets/tab/tab4_0.png";
import tab5_1 from "@/assets/tab/tab5_1.png";
import tab5_0 from "@/assets/tab/tab5_0.png";
import { defineComponent } from "vue";
export default defineComponent({
  name: "v-foot",
  data: () => ({
    active: 0,
    tabList: [
      {
        title: "首页",
        path: "/index",
        iconActive: tab1_1,
        iconDefault: tab1_0,
        badge: "",
      },
      {
        title: "消息",
        path: "/message",
        iconActive: tab4_1,
        iconDefault: tab4_0,
        badge: "6",
      },
      {
        title: "我的",
        path: "/mine",
        iconActive: tab5_1,
        iconDefault: tab5_0,
        badge: "",
      },
    ],
  }),
  mounted() {
    this.foucsTab(this.$route.path);
  },
  watch: {
    $route(to) {
      this.foucsTab(to.path);
    },
  },
  methods: {
    foucsTab(path) {
      this.tabList.forEach((item, i) => {
        if (item.path === path) {
          this.active = i;
        }
      });
    },
  },
});
</script>